<template>
  <div class="scrollup" id="scroll-up">
    <a href="#" >
      <i class="iconfont icon-arrowupshangjiantou scrollup__icon"></i>
    </a>
  </div>
</template>
<script setup>
/*==================== CHANGE BACKGROUND HEADER ====================*/
function scrollHeader() {
  const nav = document.getElementById('header')
  if (this.scrollY >= 80) nav.classList.add('scroll-header'); else nav.classList.remove('scroll-header')
}

window.addEventListener('scroll', scrollHeader)

/*==================== SHOW SCROLL UP ====================*/
function scrollUp() {
  const scrollUp = document.getElementById('scroll-up');
  if (this.scrollY >= 560) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll')
}

window.addEventListener('scroll', scrollUp)
</script>
<style lang="scss" scoped>
/*========== SCROLL UP ==========*/
.scrollup {
  position: fixed;
  right: 1rem;
  bottom: -20%;
  background-color: var(--first-color);
  opacity: .8;
  padding: .4rem .5rem;
  border-radius: .4rem;
  z-index: var(--z-tooltip);
  transition: .4s;
}

.scrollup:hover {
  background-color: var(--first-color-alt);

  .scrollup__icon {
    transform: translateY(.2rem);
  }
}

.scrollup__icon {
  font-size: 1.2rem;
  color: #FFF;
}

/* Show scroll */
.show-scroll {
  bottom: 5rem;
}

</style>
